<template>
  <div class="stationMap-container">
    <div class="stationMap">
      <infoWindow
        :map="map"
        :markers="markers"
        @on-change="change">
        <el-descriptions class="margin-top" title="站点信息" size="medium" :column="1" border>
          <el-descriptions-item label="站点名称">
            {{theMarker.stationName}}
          </el-descriptions-item>
          <el-descriptions-item label="区站号（字符）">
            {{theMarker.stationIdC}}
          </el-descriptions-item>
          <el-descriptions-item label="经度">
            {{theMarker.lng}}
          </el-descriptions-item>
          <el-descriptions-item label="纬度">
            {{theMarker.lat}}
          </el-descriptions-item>
        </el-descriptions>
      </infoWindow>
    </div>
  </div>
</template>

<script>
import infoWindow from '@/components/infoWindow/infoWindow.vue'
import { listInfoByDto } from "@/api/modules/info";
import blueMarker from "@/assets/marker/72B5FC.png";

export default {
  name: "StationMap",
  components: {
    infoWindow,
  },
  data() {
    return {
      // 地图配置
      map: {
        ak: 'udsmk3UY80oXjW6ez70FKjaQK2kWjBNj',
        // 中心点
        center: {
          lng: '106.42',
          lat: '26.35'
        },
        // 缩放等级
        zoom: 11,
        width: '100%',
        height: '100%',
      },
      // 地图标记点
      markers: [],
      // 所有站点集合
      allStationList:[],
      // 当前站点对象
      theMarker:{},
    };
  },
  created() {
    this.initMap();
  },
  methods: {
    /** 对地图进行初始化 */
    initMap(){
      let selectDto = {
        stationState:1
      };
      let markerIcon = {
        url:blueMarker,
        size:{
          width: 50,
          height: 60,
        }
      }
      listInfoByDto(selectDto).then(res=>{
        this.allStationList = res.data;
        this.allStationList.forEach(station =>{
          this.markers.push({
            lng:station.lon,
            lat:station.lat,
            labelShow:false,
            stationId:station.stationId,
            stationName:station.stationName,
            stationIdC:station.stationIdC,
            markerIcon:markerIcon
          })
        })
      });
    },
    // 切换标记点 marker当前标记点对象
    change(marker) {
      console.log(marker)
      this.theMarker = marker;
    },
  },
}
</script>

<style scoped>
.stationMap-container {
  display: flex;
  width: 100%;
  height: 90vh;
}

.stationMap {
  width: 100%;
  flex: 1; /*沾满剩下的空间*/
  overflow: hidden
}
</style>
